<template>
  <svg :class="['svg-icon', $attrs.class]" :style="svgStyle" aria-hidden="true">
    <use :xlink:href="`#${prefix}-${name}`" />
  </svg>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    name: string,
    size?: string | number,
    color?: string,
    prefix?: string,
  }>(),
  {
    size: '1em',
    prefix: 'icon'
  }
)

const svgStyle = computed(() => {
  const json: Record<string, any> = {
    width: props.size,
    height: props.size
  }

  if (props.color) json.fill = props.color

  return json
})
</script>